<template>
  <div class="inspectPdf container flex contract-wrapper-info" id="container">
    <div class="pdf-btn" @click="htmlToPdf">下载</div>
    <main class="details-container-wrap flex column" ref="printArea">
      <div class="police-agency">{{ contractInfo.policeAgencyName }}</div>
      <div class="hr"></div>
      <div class="document-police-agency">房屋租赁合同</div>

      <div class="content">
        <div class="block">
          <div class="t-body">
            <div class="t-tr">
              <div class="i-left">
                <div class="t-item t-rent-type">出租房(甲方)</div>
              </div>
              <div class="i-right">
                <div class="t-item t-rent-name">{{ contractInfo.hostName }}</div>
                <div class="t-item t-rent-label">身份证号</div>
                <div class="t-item t-rent-value t-rent-value-idcard">{{ contractInfo.hostIdcard }}</div>
                <div class="t-item t-rent-label">手机号码</div>
                <div class="t-item t-rent-value r-last-value">{{ contractInfo.hostMobile }}</div>
              </div>
            </div>
            <div class="t-tr">
              <div class="i-left">
                <div class="t-item t-rent-type">承租方(乙方)</div>
              </div>
              <div class="i-right">
                <div v-for="(item, index) in contractInfo.rentTenantLandList" :key="index" class="right-inner">
                  <div class="t-item t-rent-name">{{ item.tenantryName }}</div>
                  <div class="t-item t-rent-label">身份证号</div>
                  <div class="t-item t-rent-value t-rent-value-idcard">{{ item.tenantryIdcard }}</div>
                  <div class="t-item t-rent-label">手机号码</div>
                  <div class="t-item t-rent-value r-last-value">{{ item.tenantryMobile }}</div>
                </div>
              </div>
            </div>

            <!-- <div class="t-tr">
              <div class="t-item">
                <div class="t-label">身份证号</div>
                <div class="t-value">{{ contractInfo.hostIdcard }}</div>
              </div>
              <div class="t-item">
                <div class="t-label">身份证号</div>
                <div class="t-value t-value-right" v-if="contractInfo.rentTenantLandList">
                  {{ contractInfo.rentTenantLandList.map((item) => item.tenantryIdcard).join() }}
                </div>
              </div>
            </div>
            <div class="t-tr">
              <div class="t-item">
                <div class="t-label">联系电话</div>
                <div class="t-value">{{ contractInfo.hostMobile }}</div>
              </div>
              <div class="t-item">
                <div class="t-label">联系电话</div>
                <div class="t-value t-value-right" v-if="contractInfo.rentTenantLandList">
                  {{ contractInfo.rentTenantLandList.map((item) => item.tenantryMobile).join() }}
                </div>
              </div>
            </div> -->
          </div>
        </div>
        <div class="content-block">
          <div class="c-body">
            <div class="t-tr">
              <div class="t-label">房屋信息</div>
              <div class="t-value">
                房屋地址: <span class="underline">{{ contractInfo.areaName }}</span
                >,房屋面积:<span class="underline">{{ contractInfo.area ? contractInfo.area : '/' }}</span
                >㎡。
              </div>
            </div>
            <div class="t-tr">
              <div class="t-label">租房用途</div>
              <div class="t-value">
                乙方所租房屋仅为
                <span class="underline">{{ contractInfo.rentUse }}</span> 使用;不得进行任何违法活动，否则后果自负。
              </div>
            </div>
            <div class="t-tr">
              <div class="t-label">租赁期限</div>
              <div class="t-value">
                <span class="underline">{{ moment(contractInfo.beginTime).format('YYYY') }}</span
                >年<span class="underline">{{ moment(contractInfo.beginTime).format('MM') }}</span
                >月<span class="underline">{{ moment(contractInfo.beginTime).format('DD') }}</span
                >日至<span class="underline">{{
                  moment(contractInfo.beginTime).add(contractInfo.leaseTerm, 'months').format('YYYY')
                }}</span
                >年<span class="underline">{{
                  moment(contractInfo.beginTime).add(contractInfo.leaseTerm, 'months').format('MM')
                }}</span
                >月<span class="underline">{{
                  moment(contractInfo.beginTime).add(contractInfo.leaseTerm, 'months').format('DD')
                }}</span
                >日。
              </div>
            </div>
            <div class="t-tr">
              <div class="t-label">房租信息</div>
              <div class="t-value">
                房屋月租金为<span class="underline">{{ contractInfo.rentalRent }}</span
                >元。
              </div>
            </div>
            <div class="t-tr">
              <div class="t-label">租房条款</div>
              <div class="t-value">
                第一条：出租方责任及义务<br />
                1、租赁期内不得无故收回房屋，如甲方中途将房屋收回，甲方应退还剩余房款，须另外补偿因搬迁给乙方造成的费用并交纳壹个月租金作为向乙方的补偿金。<br />
                2、租赁房屋内各项设施如损坏，甲方有义务与相关维修部门联系，进行及时处理。<br />
                第二条：承租方责任及义务<br />
                1、乙方应按照本合同规定的日期和金额交纳租金，逾期未缴付租金，按照所欠租金的0.5%计算滞纳金。超过15日未付清，视为提前终止合同，甲方有权收回房屋。乙方租赁期内不得无故退租，如乙方中途退租，乙方应补偿给甲方壹个月的租金作为补偿；<br />
                2、乙方不得利用此房屋进行非法活动，储藏违法物品或危险物品；<br />
                3、租赁期内未经甲方同意，不得擅自将房屋转租、分租、转让、转借、联营、入股或与他人调剂交换；<br />
                4、乙方应爱护房屋及其设施（详见附件1），室内一切设施属人为损坏，乙方应负责赔偿，属自然损坏，乙方不予赔偿。<br />
                第三条：违约责任<br />
                1、甲方向乙方收取约定合同外的费用，乙方有权拒付。<br />
                2、乙方向甲方提出合同约定外的补偿，甲方有权拒付。<br />
                第四条：租赁期间房屋的维修<br />
                乙方因使用需要，不影响房屋结构的前提下，可对承租房进行维修，但应事先得到甲方和物业管理公司的同意后方可施工，租赁期满后乙方不得拆除已装修部分，不得向甲方索取装修费用。<br />
                第五条：乙方有下列情况之一的，甲方可终止合同，收回房屋。<br />
                1、乙方超过合同规定日期不缴纳租金并押金不足以抵扣租金、滞纳金，且与乙方无法取得联系时，甲方有权请公证处公正撬开房门，室内一切物品由甲方代为保管三个月，若三个月内仍无法与乙方取得联系，甲方有权对保管物品进行处理。<br />
                2、乙方使用此房屋进行违法行为。<br />
                3、未经甲方同意擅自改变房屋结构。<br />
                第六条：免责条件<br />
                1、房屋因不可抗力的因素，导致甲乙双方受损，甲乙双方互不承担责任，甲方应退还乙方剩余租金。<br />
                2、因市政建设需要拆迁或改造已租赁房屋，甲乙双方互不承担责任，但甲方应退还乙方剩余租金。<br />
                第七条：本合同双方均严格执行，在履行中如有争议，双方协商解决，协商不成的，任何乙方均可向有权管辖的人民法院提起民事诉讼。<br />
              </div>
            </div>
            <div class="t-tr">
              <div class="t-label">甲方(签名)</div>
              <div class="t-value">
                <img
                  @click="handlePreview([contractInfo.hostSign])"
                  class="sing-img-wrapper"
                  :src="prefixImg + contractInfo.hostSign"
                  alt=""
                  srcset=""
                />
              </div>
            </div>
            <div class="t-tr">
              <div class="t-label">乙方(签名)</div>
              <div class="t-value">
                <template v-if="contractInfo.rentTenantLandList">
                  <img
                    @click="handlePreview([item.tenantrySign])"
                    v-for="(item, index) in contractInfo.rentTenantLandList"
                    class="sing-img-wrapper"
                    :src="prefixImg + item.tenantrySign"
                    alt=""
                    :key="index"
                    srcset=""
                  />
                </template>
              </div>
            </div>
            <div class="t-tr">
              <div class="t-label">签约日期</div>
              <div class="t-value">
                {{ moment(contractInfo.createTime).format('YYYY/MM/DD') }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import { findEnableDictItemsbyCode } from '@/api/api'
import { getAction, postAction } from '@/api/manage'
import { contractDetails, getDictItemsFromCache } from '../../../api/api'
import moment from 'moment'
import { addHtmlStyleProps, getPrefixImg, previewImage, removeHtmlStyleProps } from '../../../utils/util'

export default {
  name: 'printPDF',
  data() {
    return {
      prefixImg: '',
      records: {},
      policeCheckTaskInfo: {},
      contractInfo: {},
    }
  },
  beforeDestroy() {
    this.showElement()
  },
  mounted() {
    window.addEventListener('beforeprint', this.beforeprint)
    this.initData()
    addHtmlStyleProps(327.97)
    this.hideElement()
  },
  methods: {
    beforeprint() {
      document.querySelector('.pdf-btn').style.display = 'none'
      // document.getElementsByName('pdf-btn').style.display = 'none'
    },
    initData() {
      this.prefixImg = getPrefixImg()
      this.getContractInfo()
    },
    moment,
    getContractInfo() {
      contractDetails({
        contractId: this.$route.query.contractId,
      }).then((res) => {
        if (res.code == 200) {
          this.contractInfo = res.result
        }
      })
    },
    hideElement() {
      document.getElementsByClassName('ant-layout-header')[0].style.display = 'none'
      // document
      //   .querySelector('html')
      //   .setAttribute(
      //     'style',
      //     'min-width: 297mm !important;width: 297mm;height:auto !important;margin: 0 auto;overflow:visible !important;background:#F0F2F5;'
      //   )
      // document.body.setAttribute(
      //   'style',
      //   'width: 297mm;height:auto !important;overflow:visible !important;margin: 0 auto;'
      // )
    },
    showElement() {
      document.getElementsByClassName('ant-layout-header')[0].style.display = 'unset'
      // document.querySelector('html').removeAttribute('style')
      // document.body.removeAttribute('style')
    },
    werImg(id) {
      const ViewerDom = document.getElementById(id)
      const viewer = new Viewer(ViewerDom, {
        toolbar: true,
        button: true,
        navbar: true,
        title: false,
        url: 'data-original',
        hide: function () {
          viewer.destroy()
        },
      })
      viewer.show()
    },

    htmlToPdf() {
      document.head.getElementsByTagName('title')[0].innerText = '租房电子合同'
      let jubuData = document.getElementById('container').innerHTML
      window.document.body.innerHTML = jubuData
      window.print()
      window.location.reload()
    },
    handlePreview(urls = []) {
      previewImage.call(this, urls)
    },
  },
  destroyed() {
    removeHtmlStyleProps()
  },
}
</script>

<style lang="less" media="print">
@import url('./print.less');
</style>
<style lang="less" scoped>
.inspectPdf {
  background: unset;
  padding-top: 0;
}
.details-container-wrap {
  // width: 297mm;
  width: 1240px;
  margin: 0 auto;
  padding: 20px 50px;
  background: #fff;
  .police-agency {
    font-weight: bold;
    font-size: 20px;
    color: #545454;
    text-align: right;
    margin-bottom: 19px;
  }
  .document-police-agency {
    font-weight: bold;
    font-weight: bold;
    font-size: 40px;
    text-align: center;
    margin: 22px 0;
  }
  .hr {
    border-bottom: 1px solid #dcdcdc;
  }
  .content {
    border: 1px solid rgba(194, 194, 194, 0.3216);
  }
  .block {
    .t-body {
      .t-tr {
        display: flex;
        .i-left {
          flex-shrink: 0;
        }
        .i-right {
          flex: 1;
          display: flex;
          flex-wrap: wrap;
          .right-inner {
            display: flex;
            width: 100%;
          }
        }
        .t-rent-type {
          width: 184px;
          background: #f3f3f3;
          border-right: 1px solid rgba(194, 194, 194, 0.3216);
          border-bottom: 1px solid rgba(194, 194, 194, 0.3216);
          padding: 22px 22px 22px 30px;
          font-weight: 500;
          font-size: 22px;
          color: #666666;
          flex-shrink: 0;
          height: 100%;
        }

        .t-rent-name {
          width: 150px;
          border-right: 1px solid rgba(194, 194, 194, 0.3216);
          border-bottom: 1px solid rgba(194, 194, 194, 0.3216);
          padding: 22px 12px 22px 20px;
          font-weight: bold;
          font-size: 24px;
          color: #333333;
        }

        .t-rent-label {
          width: 140px;
          font-weight: 500;
          font-size: 22px;
          padding: 22px 12px 22px 13px;
          color: #666666;
          border-right: 1px solid rgba(194, 194, 194, 0.3216);
          border-bottom: 1px solid rgba(194, 194, 194, 0.3216);
          flex-shrink: 0;
        }
        .t-rent-value {
          font-weight: bold;
          font-size: 24px;
          padding: 22px 24px 22px 24px;
          color: #333333;
          border-right: 1px solid rgba(194, 194, 194, 0.3216);
          border-bottom: 1px solid rgba(194, 194, 194, 0.3216);
          flex: 1;
        }
        .t-rent-value-idcard {
          width: 300px !important;
          flex: none !important;
        }

        .r-last-value {
          border-right: 0;
        }
      }
    }
  }
  .content-block {
    .c-body {
      .t-tr {
        &:last-of-type {
          .t-label {
            border-bottom: 0;
          }
          .t-value {
            border-bottom: 0;
          }
        }
        .t-value:last-of-type {
          border-right: 0;
        }
        display: flex;
        .t-label {
          width: 184px;
          padding: 22px 22px 22px 30px;
          font-weight: 500;
          font-size: 22px;
          color: #666666;
          background: #f3f3f3;
          color: #666666;
          border-right: 1px solid rgba(194, 194, 194, 0.3216);
          border-bottom: 1px solid rgba(194, 194, 194, 0.3216);
        }
        .t-value {
          padding: 20px;
          line-height: 50px;
          flex: 1;

          font-weight: 500;
          font-size: 22px;
          color: #999999;
          border-right: 1px solid rgba(194, 194, 194, 0.3216);
          border-bottom: 1px solid rgba(194, 194, 194, 0.3216);
          .underline {
            padding: 0 8px;
            font-weight: bold;
            font-size: 24px;
            color: #333333;
            border-bottom: 1px solid #333;
          }

          .sing-img-wrapper {
            width: 239px;
            height: 116px;
            object-fit: cover;
          }
        }
      }
    }
  }

  .sign-img {
    padding: 14px 50px 50px 20px;
    .list-wrapper {
      display: flex;
      .img-item {
        display: flex;
        align-items: center;
      }
      .item {
        flex: 1;
        .i-label {
          font-weight: 500;
          color: #666666;
          font-size: 14px;
        }
        .i-value {
          width: 107px;
          height: 52px;
          margin-left: 5px;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
      .text-item {
        display: flex;
        font-weight: bold;
        font-size: 14px;
        color: #333333;
      }
    }
  }
}
</style>
